<template>
  <div class="q-col-gutter-md q-mt-xl">
    <div class="col-12">
      <q-card class="module-card">
        <q-card-section class="q-pa-md">
          <div class="row items-center q-gutter-md">
            <div class="col-auto">
              <q-icon name="music_note" size="30px" class="text-primary" />
            </div>
            <div class="col-auto">
              <div class="text-h6">{{ currentSong.title || "未播放" }}</div>
              <div class="text-caption text-grey-7">
                {{ currentSong.artist || "选择一首歌曲开始播放" }}
              </div>
            </div>
            <div class="col" style="width: 60%; min-width: 200px">
              <div class="row">
                <q-linear-progress
                  :value="playProgress"
                  color="primary"
                  class="col"
                  stripe
                  rounded
                  size="20px"
                  style="width: 100%; cursor: pointer"
                  @click="handleProgressClick"
                />
              </div>
              <div class="row">
                <div class="col-auto text-caption" style="width: 20px">
                  {{ formatTime(currentTime) }}
                </div>
                <q-space />
                <div
                  class="col-auto text-caption text-right"
                  style="width: 30px; padding-right: 20px"
                >
                  {{ formatTime(totalTime) }}
                </div>
              </div>
            </div>
            <div class="col-auto">
              <q-btn
                round
                :icon="isPlaying ? 'pause' : 'play_arrow'"
                @click="togglePlay"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const audioElement = ref(new Audio());
const currentSong = ref({
  title: "我很快乐（天赐的声音）",
  artist: "王源，王赫野",
  duration: 0,
  url: "https://zhuchundashuaige.s3.eu-north-1.amazonaws.com/public/music/myHappy.mp3",
});
const isPlaying = ref(false);
const currentTime = ref(0);
const totalTime = ref(currentSong.value.duration);
const playProgress = computed(() => currentTime.value / totalTime.value);

const togglePlay = () => {
  isPlaying.value = !isPlaying.value;
  if (isPlaying.value) {
    audioElement.value.play();
  } else {
    audioElement.value.pause();
  }
};

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${String(minutes).padStart(2, "0")}:${String(
    remainingSeconds
  ).padStart(2, "0")}`;
};
const handleProgressClick = (e) => {
  const rect = e.target.getBoundingClientRect();
  const percentage = (e.clientX - rect.left) / rect.width;
  currentTime.value = Math.round(totalTime.value * percentage);
  audioElement.value.currentTime = newTime;
};

onMounted(() => {
  audioElement.value.src = currentSong.value.url;

  // 音频元数据加载
  audioElement.value.addEventListener("loadedmetadata", () => {
    totalTime.value = audioElement.value.duration;
    currentSong.value.duration = totalTime.value;
  });

  // 时间更新监听
  audioElement.value.addEventListener("timeupdate", () => {
    currentTime.value = audioElement.value.currentTime;
  });

  // 播放结束处理
  audioElement.value.addEventListener("ended", () => {
    isPlaying.value = false;
  });
});

onUnmounted(() => {
  audioElement.value.pause();
  audioElement.value.removeAttribute("src");
});
</script>

<style scoped>
.module-card {
  transition: transform 0.3s;
  border-radius: 12px;
  height: 100%;
}
</style>
